<template>
  <div class="hello">
    <input class="iptClass" type="text" v-model="addData.name" placeholder="茶叶名称：">
    <input class="iptClass" type="text" v-model="addData.type" placeholder="茶叶类型：">
    <input class="iptClass" type="text" v-model="addData.price" placeholder="茶叶价格：">
    <input class="iptClass" type="text" v-model="addData.stock" placeholder="茶叶库存：">
    <input class="iptClass" type="text" v-model="addData.description" placeholder="茶叶描述：">
    <input class="iptClass" type="submit" value="提交" @click="add">

  <table class="tab" border="1">
      <thead class="thead">
          <tr>
              <th>ID</th>
              <th>茶叶名称</th>
              <th>茶叶类型</th>
              <th>茶叶价格</th>
              <th>茶叶库存</th>
              <th>茶叶描述</th>
              <th>创建时间</th>
              <th>更新时间</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody id="tbd">
<tr v-for="(item,index) in list" :key="index">
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
  <td>{{item.type}}</td>
  <td>{{item.price}}</td>
  <td>{{item.stock}}</td>
  <td>{{item.description}}</td>
  <td>{{item.created_at}}</td>
  <td>{{item.updated_at}}</td>
  <td>
    <button @click="deleteItem(item.id)">删除</button>
  </td>

</tr>
      </tbody>
  </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  data(){
    return {
      list:[],
// 添加
addData: {
        name: '',
        type: '',
        price: '',
        stock: '',
        description: ''
      }
    }
  },
  methods:{

    // 获取
    huoqu(){
      axios.get('http://liu.zzgoodqc.cn/teas').then((res)=>{
				console.log(res.data.data);
        this.list = res.data.data
			})

    },

    add(){
axios({
  method:'post',
  url:'https://liu.zzgoodqc.cn/teas',
  data:this.addData,
})
.then((res)=>{
  this.addData={
    name: '',
        type: '',
        price: '',
        stock: '',
        description: ''
  }
})
    }
  },
  mounted(){
  // 获取
   this.huoqu()
  //  添加
		}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.iptClass{
  margin-right: 20px;
}
 
.thead{
  background: #c58484;
}
        table {
          width: 1200px;
          border-collapse: collapse;
         
           
        }

        form {
            width: 280px;
            /* margin: 20px auto; */
            /* padding: 20px; */
            font-weight: bold;
        }
        #tbd{
          text-align: center;
        }
        input{
          height: 30px;
          border-radius: 10px;
          outline: none;
          border: none;
          border: 1px solid #ccc;
        }
        form input {
            margin: 10px 5px;
        }
        .one{
            width: 300px;
            margin: 5px auto;
        }
        .one input{
            /* width: 200px; */
            height: 22px;
        }

        tr {
            height: 50px;
        }
        #sub{
            width: 250px;
            height: 40px;
            line-height: 40px;
            background: rgb(201, 36, 36);
            color: #fff;
            font-weight: bold;
        }
    </style>